<script setup>
import {reactive, ref, watch} from "vue";
import {reqInstance} from "@/utils/request/index.js";
import {message} from "ant-design-vue";

const emit = defineEmits(['create-completed'])

const drawerTitle = ref("新增客户")
const formRef = ref()
const visible = ref(false)
const open = () => {
  visible.value = true
}

const createOpen = () => {
  drawerTitle.value = "新增客户"
  formState.value = defaultFormData
  open()
}

const updateOpen = (data) => {
  drawerTitle.value = "编辑客户"
  formState.value = data
  open()
}

const doSave = async () => {
  formRef.value.validate().then(()=> {
    if (drawerTitle.value !== "新增客户"){
      updateApi()
    }else{
      createApi()
    }
  })
}

const createApi = async ()=> {
  try {
    const res = await reqInstance({
      url: '/customer',
      method: 'post',
      data: formState.value
    })
    emit('create-completed')
    visible.value = false
  }catch (e) {
  }
}
const updateApi = async ()=> {
  try {
    const res = await reqInstance({
      url: '/customer/' + formState.value.id,
      method: 'put',
      data: formState.value
    })
    visible.value = false
  }catch (e) {
  }
}

const defaultFormData = {
  id: 0,
  com_name: '', // 公司名称
  com_code: '', // 社会统一信用代码
  customer_type: 0, // 客户性质
  invoice_title: '', // 发票抬头
  invoice_code: '', // 税号
  invoice_type: 0, // 发票类型
  invoice_bank_name: '', // 开户行
  invoice_bank_code: '', // 银行账号
  invoice_reg_address: '', // 注册场所地址
  invoice_reg_phone: '', // 注册固定电话
  contact_name: '', // 注册固定电话
  contact_phone: '', // 注册固定电话
}

const formState = ref(defaultFormData);

const formRules = {
  com_name: [
    {required:true, message:'请输入公司名称',trigger:['change','blur']}
  ],
  com_code: [
    {required:true, message:'请输入公司名称',trigger:['change','blur']}
  ],
}

defineExpose({createOpen, updateOpen})
</script>

<template>
  <a-drawer
      v-model:open="visible"
      class="custom-class"
      root-class-name="root-class-name"
      :root-style="{ color: 'blue' }"
      style="color: red"
      :title=drawerTitle
      placement="right"
  >
    <a-form layout="vertical" :model="formState" :rules="formRules" ref="formRef">
      <a-form-item prop="com_name" label="公司名称">
        <a-input v-model:value="formState.com_name" placeholder="请输入公司名称"/>
      </a-form-item>
      <a-form-item prop="com_code" label="社会统一信用代码">
        <a-input v-model:value="formState.com_code" placeholder="请输入社会统一信用代码"/>
      </a-form-item>
      <a-form-item label="客户类型">
        <a-radio-group v-model:value="formState.customer_type"  button-style="solid">
          <a-radio-button :value="0">私企</a-radio-button>
          <a-radio-button :value="1">国企</a-radio-button>
          <a-radio-button :value="2">政府单位</a-radio-button>
          <a-radio-button :value="3">其他</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="对接人姓名">
        <a-input v-model:value="formState.contact_name" placeholder="请输入对接人姓名"/>
      </a-form-item>
      <a-form-item label="对接人电话">
        <a-input v-model:value="formState.contact_phone" placeholder="请输入对接人电话"/>
      </a-form-item>
      <a-form-item label="发票抬头">
        <a-input v-model:value="formState.invoice_title" placeholder="请输入发票抬头"/>
      </a-form-item>
      <a-form-item label="税号">
        <a-input v-model:value="formState.invoice_code" placeholder="请输入税号"/>
      </a-form-item>
      <a-form-item label="发票类型">
        <a-radio-group v-model:value="formState.invoice_type"  button-style="solid">
          <a-radio-button :value="0">普票</a-radio-button>
          <a-radio-button :value="1">专票</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="开户行">
        <a-input v-model:value="formState.invoice_bank_name" placeholder="请输入开户行"/>
      </a-form-item>
      <a-form-item label="银行账号">
        <a-input v-model:value="formState.invoice_bank_code" placeholder="请输入银行账号"/>
      </a-form-item>
      <a-form-item label="注册场所地址">
        <a-input v-model:value="formState.invoice_reg_address" placeholder="请输入注册场所地址"/>
      </a-form-item>
      <a-form-item label="注册固定电话">
        <a-input v-model:value="formState.invoice_reg_phone" placeholder="请输入注册固定电话"/>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="doSave">保存</a-button>
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<style scoped>

</style>